<template>
  <div>
    <div class="header">
      <SearchBox @query="getQuery"/>
      <!-- 热门搜索界面 -->
      <search-result v-show="query" :query="query"/>
      <div class="hot" v-show="!query">
        <h4 class="hot-title">热门搜索</h4>
        <ul class="hot-list">
          <li class="hot-item" v-for="(item,index) in hots" :key="item.num" @click="runAndadd(item.hotWord)">{{item.hotWord}}</li>
        </ul>
      </div>
      <!-- 历史 -->
      <SearchHistory v-show="!query"/>
      
    </div>
  </div>
</template>

<script>
import SearchBox from "../../components/Searchbox";
import SearchHistory from './history.vue'
import SearchResult from './result.vue'
import {getSearchHotKeyword} from '../../api/search';
export default {
  name: "Search",
  components: { SearchBox,SearchHistory,SearchResult },
  data(){
      return {
          hots:[],
          query:''
      }
  },
  mounted(){
      this.getHotKeyword()
  },
  methods:{
      getHotKeyword(){
        return getSearchHotKeyword().then(data =>{
          return new Promise(resolve => {
            if(data){
              this.hots = data;
              resolve()
            }
          })
        })
      },
      runAndadd(val){
          this.$store.dispatch('addHistorys',val)
          this.$router.push("/detail?text=" + val);
      },
      getQuery(query){
        this.query = query
      },
  }
};
</script>

<style scoped>
.hot {
  padding-left: 0.3rem;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 0.3rem;
}
.hot-title {
  height: 0.4rem;
  line-height: 1.1rem;
  color: #5d656b;
  font-size: 0.5rem;
  font-weight: bold;
}

.hot-list {
  display: flex;
  flex-wrap: wrap;
}

.hot-item {
  padding: 8px;
  background-color: #f0f2f5;
  border-radius: 0.1rem;
  font-size: 0.4rem;
  margin: 0 0.3rem 0.3rem 0;
  color: #686868;
}
</style>>
